<template>
	<view class="center">
		<view class="bg center">
			<view class="logo" @click="goLogin" :hover-class="!login ? 'logo-hover' : ''">
				<image class="logo-img" :src="login ? uerInfo.avatarUrl :avatarUrl"></image>
				<view class="logo-title">
					<text class="uer-name">Hi，{{login ? uerInfo.name : '您未登录'}}</text>
					<text class="go-login navigat-arrow" v-if="!login">&#xe65e;</text>
				</view>
			</view>
			<view class="count">
				<view class="count-item" v-for="(c,index) in count">
					<text class="count-item-num">{{c.num}}</text>
					<text class="count-item-text">{{c.text}}</text>
				</view>
			</view>
		</view>
		<view class="center-nav margin-top">
			<view class="center-nav-title">
				<text>我的订单</text>
			</view>
			<view class="center-nav-content">
				<view class="center-nav-item" v-for="(nav,index) in navs">
					<text class="center-nav-item-icon"> {{ nav.icon  }} </text>
					<text class="center-nav-item-text">{{nav.text}}</text>
				</view>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon color-1">&#xe60e;</text>
				<text class="list-text">帐号管理</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon color-2">&#xe60b;</text>
				<text class="list-text">新消息通知</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list">
			<view class="center-list-item border-bottom">
				<text class="list-icon color-3">&#xe60c;</text>
				<text class="list-text">帮助与反馈</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
			<view class="center-list-item">
				<text class="list-icon color-4">&#xe60c;</text>
				<text class="list-text">服务条款及隐私</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list" @click="aboutApp">
			<view class="center-list-item">
				<text class="list-icon color-1">&#xe60d;</text>
				<text class="list-text">关于应用</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
		<view class="center-list" @click="logout">
			<view class="center-list-item">
				<text class="list-icon color-1">&#xe60d;</text>
				<text class="list-text">退出登录</text>
				<text class="navigat-arrow">&#xe65e;</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				login: false,
				avatarUrl: "../../static/my.png",
				uerInfo: {},
				count: [{
						num: 5,
						text: '我的收藏'
					},
					{
						num: 7,
						text: '我的足迹'
					},
					{
						num: 1,
						text: '优惠券'
					}
				],
				navs: [{
						icon: "\u{e602}",
						text: '待付款'
					},
					{
						icon: "\u{e601}",
						text: '待发货'
					},
					{
						icon: "\u{e603}",
						text: '待收货'
					},
					{
						icon: "\u{e604}",
						text: '待评价'
					},
					{
						icon: '\u{e60a}', //原代码：&#xe60a;
						text: '退款'
					}
				]
			}
		},
		onLoad() {
			// 是否登录
			this.isLogin()
			// console.log('onload')
		},
		onShow() {
			// console.log('onshow')
			this.isLogin()
		},
		methods: {
			// 是否登录
			isLogin() {
				const token = uni.getStorageSync('token');
				if (!token) {
					this.login = false
					// this.goLogin()
					return;
				}
				this.login = true
				const phone = uni.getStorageSync('phone')
				this.uerInfo.name = phone
				this.uerInfo.avatarUrl = this.avatarUrl
			},
			// 跳转到登录页面
			goLogin() {
				if (!this.login) {
					uni.navigateTo({
						url: '/pages/login/index',
						success() {}
					});
				}
			},
			// 退出登录
			logout() {
				const _that = this
				uni.showModal({
					title: '提示',
					content: '确定退出吗？',
					success(res) {
						if (res.confirm) {
							_that.sureLogout()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 调用后端接口退出登录
			sureLogout() {
				uni.showLoading({
					title: '正在退出中,请耐心等待一下!',
					mask: true
				})
				const token = uni.getStorageSync('token');
				if (!token) {
					uni.hideLoading()
					return;
				}
				this.$api.post({
					url: '/app/logout'
				}).then(res => {
					if (res && res.data.code === 0) {
						const data = res.data
						if (data.isLogout) {
							uni.showToast({
								title: '退出成功!',
								icon: 'none',
								duration: 2000
							})
							uni.clearStorageSync();
							this.login = false
							return
						} else {
							uni.showToast({
								title: '退出失败!',
								icon: 'none',
								duration: 2000
							})
							return
						}
					}
					uni.hideLoading()
				}).catch(error => {
					console.log('fail:', error)
					uni.hideLoading()
				})
			},
			// 关于应用
			aboutApp() {
				uni.clearStorageSync();
			}
		}
	}
</script>

<style>
	@font-face {
		font-family: texticons;
		font-weight: normal;
		font-style: normal;
		src: url('https://at.alicdn.com/t/c/font_4218190_6debofuo8gh.ttf?t=1701960489041') format('truetype');
	}

	page,
	view {
		display: flex;
	}

	page {
		background-color: #f4f4f4;
	}

	.center {
		flex-direction: column;
	}
</style>
<style lang="scss" scoped>
	$head-color: #cd3b33;
	$white-color: #fff;
	$radius: 5rpx;
	$border-color: #efefef;
	$color-1: #007aff;
	$color-2: #4cd964;
	$color-3: #f0ad4e;
	$color-4: #dd524d;
	$list-item-height: 100rpx;
	$list-margin: 20rpx;

	.bg {
		background-color: $color-1;
		min-height: 600rpx;
		border-bottom-left-radius: 30%;
		border-bottom-right-radius: 30%;

		.logo {
			width: 100vw;
			padding: 20rpx 50rpx 35rpx;
			box-sizing: border-box;
			flex-direction: row;
			align-items: center;
			margin-top: 80rpx;

			.logo-img {
				width: 140rpx;
				height: 140rpx;
				border-radius: 150rpx;
			}

			.logo-title {
				height: 150rpx;
				flex: 1;
				align-items: center;
				justify-content: space-between;
				flex-direction: row;
				margin-left: 20rpx;

				.uer-name {
					height: 60rpx;
					line-height: 60rpx;
					font-size: 34rpx;
					color: #FFFFFF;
				}

				.go-login.navigat-arrow {
					font-size: 38rpx;
					color: #FFFFFF;
				}
			}
		}

		.logo-hover {
			opacity: 0.8;
		}

		.login-title {
			height: 150rpx;
			align-items: self-start;
			justify-content: center;
			flex-direction: column;
			margin-left: 20rpx;
		}

		.count {
			margin: 0rpx auto 0rpx;
			width: calc(100vw - 100rpx);

			.count-item {
				flex-direction: column;
				flex: 1;
				text-align: center;

				.count-item-num {
					color: $white-color;
					font-size: 36rpx;
					font-weight: 500;
				}

				.count-item-text {
					color: $white-color;
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}
		}
	}

	.center-list {
		background-color: #FFFFFF;
		margin: 0 auto $list-margin;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		border-radius: $radius;

		.center-list-item {
			height: $list-item-height;
			width: 100%;
			box-sizing: border-box;
			flex-direction: row;
			padding: 0rpx 20rpx;

			.list-icon {
				width: 40rpx;
				height: $list-item-height;
				line-height: $list-item-height;
				font-size: 45rpx;
				color: #4cd964;
				text-align: center;
				font-family: texticons;
				margin-right: 20rpx;
			}

			.color-1 {
				color: $color-1;
			}

			.color-2 {
				color: $color-2;
			}

			.color-3 {
				color: $color-3;
			}

			.color-4 {
				color: $color-4;
			}

			.list-text {
				height: $list-item-height;
				line-height: $list-item-height;
				font-size: 32rpx;
				color: #555;
				flex: 1;
				text-align: left;
			}

			.navigat-arrow {
				height: $list-item-height;
				line-height: $list-item-height;
				width: 40rpx;
				font-size: 30rpx;
				color: #999;
				text-align: right;
				font-family: texticons;
			}
		}

		.border-bottom {
			border-bottom-width: 1rpx;
			border-color: $border-color;
			border-bottom-style: solid;
		}
	}

	.center-nav {
		background-color: #FFFFFF;
		margin: 0rpx auto $list-margin;
		width: calc(100vw - 50rpx);
		flex-direction: column;
		border-radius: $radius;

		.center-nav-title {
			padding: 25rpx 30rpx;
			font-size: 34rpx;
			color: #333;
			font-weight: 400;
			border-bottom: solid 1rpx $border-color;
		}

		.center-nav-content {
			height: 180rpx;
			display: flex;
			align-items: center;

			.center-nav-item {
				flex-direction: column;
				flex: 1;
				text-align: center;

				.center-nav-item-icon {
					color: #333;
					font-size: 48rpx;
					font-weight: 500;
					font-family: texticons;
				}

				.center-nav-item-text {
					color: #666;
					font-size: 30rpx;
					font-weight: 400;
					margin-top: 15rpx;
				}
			}
		}
	}

	.margin-top {
		margin-top: -190rpx;
		min-height: 230rpx;
	}
</style>